<template>
  <view class="page-container" :class="{ 'page-loaded': pageLoaded }">
    <!-- 顶部背景图区域 -->
    <view class="top-bg-section" :style="{ backgroundImage: `url(${topBgImage})` }">
      <view class="back-btn" @click="goBack">
        <image class="back-image" src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/back.png" mode="scaleToFill">
        </image>
      </view>

      <!-- 左下角配置预览图片 -->
      <view class="reconfigure-preview">
        <image class="preview-image" src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/peizhiyulanwenzi.png"
          mode="scaleToFill"></image>
      </view>

      <!-- 右下角重新配置按钮 -->
      <view class="reconfigure-btn" @click="goBack">
        <text class="btn-text">重新配置</text>
      </view>
    </view>

    <!-- 参数输入区域 -->
    <view class="parameter-section">
      <!-- 使用flex布局使label和input在同一行 -->
      <view class="parameter-group flex items-center justify-between">
        <text class="parameter-label w-1/3">皮头直径 (mm)</text>
        <input class="parameter-input flex-1" type="text" v-model="tipDiameter" placeholder="请输入皮头直径"
          @input="validateNumber" />
      </view>

      <view class="parameter-group flex items-center justify-between">
        <text class="parameter-label w-1/3">重量 (g)</text>
        <input class="parameter-input flex-1" type="text" v-model="weight" placeholder="请输入重量"
          @input="validateNumber" />
      </view>

      <view class="parameter-group flex items-center justify-between">
        <text class="parameter-label w-1/3">长度(cm)</text>
        <input class="parameter-input flex-1" type="text" v-model="length" placeholder="请输入长度"
          @input="validateNumber" />
      </view>

      <view class="parameter-group flex items-center justify-between">
        <text class="parameter-label w-1/3">握把(cm)</text>
        <input class="parameter-input flex-1" type="text" v-model="gripCircumference" placeholder="请输入握把"
          @input="validateNumber" />
      </view>

      <view class="parameter-group flex items-center justify-between">
        <text class="parameter-label w-1/3">重心位置(cm)</text>
        <input class="parameter-input flex-1" type="text" v-model="balancePosition" placeholder="请输入重心位置"
          @input="validateNumber" />
      </view>
    </view>

    <!-- 总价和下单区域 -->
    <view class="bottom-bar">
      <view class="price-info">
        <view class="price-group">
          <text class="final-price">¥{{ totalPrice }}</text>
          <text class="original-price">¥{{ originalPrice }}</text>
        </view>
        <text class="delivery-tip">锁定订单后预计30个工作日交付</text>
      </view>

      <view class="order-btn" @click="handleOrder">
        <image class="order-image" src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/lijixiadan.png"
          :class="{ 'btn-clicked': btnClicked }"></image>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      topBgImage: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/app/flower/f1-thumb.png',
      currentTab: 'configuration',
      pageLoaded: false,
      tabChanging: false,
      btnClicked: false,
      totalPrice: '¥1,000',
      originalPrice: '¥1,488',
      // 优化后的参数名（更清晰反映含义）
      tipDiameter: '',       // 皮头直径
      weight: '',            // 重量
      length: '',            // 长度
      gripCircumference: '', // 握把
      balancePosition: '',    // 重心位置
      configData: ''
    };
  },
  created() {
    this.configData = uni.getStorageSync('selectedConfig');
    this.totalPrice = this.configData.currentFinalPrice;
    this.originalPrice = this.configData.currentOriginalPrice;
    console.log('获取配置信息:', this.configData);
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
    },
    goBack() {
      uni.navigateBack();
    },
    validateNumber(e) {
      // 限制输入为数字
      let value = e.target.value;
      value = value.replace(/[^\d.]/g, '');
      // 限制只能输入一个小数点
      value = value.replace(/\.{2,}/g, '.');
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      // 限制小数点后最多两位
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      e.target.value = value;
    },
    handleOrder() {
      // 参数验证
      if (!this.tipDiameter || !this.weight || !this.length || !this.gripCircumference || !this.balancePosition) {
        uni.showToast({
          title: '请输入完整参数',
          icon: 'none'
        });
        return;
      }

      // 检查数值范围
      if (
        parseFloat(this.tipDiameter) <= 0 ||
        parseFloat(this.weight) <= 0 ||
        parseFloat(this.length) <= 0 ||
        parseFloat(this.gripCircumference) <= 0 ||
        parseFloat(this.balancePosition) <= 0
      ) {
        uni.showToast({
          title: '参数必须大于0',
          icon: 'none'
        });
        return;
      }

      if (!this.btnClicked) {


        // 存入本地存储（使用uni.setStorageSync确保兼容性）
        try {
          this.configData.tipDiameter = this.tipDiameter;
          this.configData.weight = this.weight;
          this.configData.length = this.length;
          this.configData.gripCircumference = this.gripCircumference;
          this.configData.balancePosition = this.balancePosition;
          uni.setStorageSync('selectedConfig', this.configData);
          console.log('配置信息已存入storage:', this.configData);
        } catch (e) {
          console.error('存储配置信息失败:', e);
        }


        uni.navigateTo({
          url: '/pages/index/peizhi'
        });
        return;
      }

      this.btnClicked = true;
      setTimeout(() => {
        this.btnClicked = false;
      }, 200);
    }
  },
  mounted() {
    setTimeout(() => {
      this.pageLoaded = true;
    }, 100);
  }
};
</script>
  
<style scoped>
/* 页面容器 */
.page-container {
  background-color: #1a1a1a;
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-container.page-loaded {
  opacity: 1;
}

/* 顶部背景区域 */
.top-bg-section {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 40vh;
  min-height: 300px;
  max-height: 500px;
}

.back-btn {
  position: absolute;
  top: 80rpx;
  left: 20rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-image {
  width: 80rpx;
  height: 80rpx;
  object-fit: contain;
}

.reconfigure-preview {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 360rpx;
  height: 90rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reconfigure-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 16px;
}

/* 参数输入区域 */
.parameter-section {
  padding: 30rpx;
  background-color: #1a1a1a;
}

/* 修改为flex布局 */
.parameter-group {
  margin-bottom: 30rpx;
  background-color: #222;
  padding: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.parameter-label {
  font-size: 28rpx;
  color: #999;
  width: 30%;
  /* 标签宽度占30% */
}

.parameter-input {
  height: 80rpx;
  border: none;
  border-radius: 8rpx;
  color: #fff;
  padding: 0 20rpx;
  font-size: 28rpx;
  flex: 1;
  /* 输入框占剩余空间 */
}

/* 选项卡（未使用但保留） */
.tab-bar {
  display: flex;
  justify-content: center;
  padding: 15px 20px;
  background-color: #1a1a1a;
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 20rpx;
}

.tab-bar-item {
  display: flex;
  border-radius: 20rpx;
  overflow: hidden;
  background-color: #222;
}

.tab-item {
  flex: 1;
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 20rpx 0;
  font-size: 30rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-item.active {
  background-color: #666;
}

.tab-left {
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
}

.tab-right {
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

/* 配置信息（未使用但保留） */
.material-section {
  padding: 20px;
}

.configuration-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #333;
}

.item-label {
  font-size: 16px;
  color: #999;
  margin-bottom: 10px;
}

.item-value {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

.justify-between {
  justify-content: space-between;
}

.version-name {
  font-size: 18px;
  font-weight: 500;
}

.version-price {
  font-size: 18px;
  font-weight: 500;
  text-align: right;
}

.material-image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 4rpx;
  object-fit: cover;
}

.material-name {
  font-size: 16px;
  color: #ffffff;
}

/* 底部信息栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #0a0a0a;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.price-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.final-price {
  font-size: 24px;
  font-weight: bold;
  position: relative;
}

.final-price::after {
  content: '';
  right: -10px;
  top: 50%;
  width: 1px;
  height: 18px;
  background-color: #999;
  transform: translateY(-50%);
}

.delivery-tip {
  font-size: 14px;
  color: #999;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  font-size: 14px;
}

.order-btn {
  display: flex;
  align-items: center;
}

.order-image {
  width: 200rpx;
  height: 80rpx;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.order-image:active,
.order-image.btn-clicked {
  transform: scale(0.95);
}</style>